<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <!-- 搜索条件盒子 -->
      <el-row>
        <el-form :model="queryParams" ref="queryRef" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="仪器型号：" prop="code">
                <el-input maxlength="100" v-model.trim="queryParams.code" placeholder="请输入仪器型号"
                  @keyup.enter="handleQuery" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="仪器编号：" prop="number">
                <el-input maxlength="100" v-model.trim="queryParams.number" placeholder="请输入仪器编号"
                  @keyup.enter="handleQuery" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16">
              <el-form-item label="仪器名称：" prop="name">
                <el-input maxlength="100" v-model.trim="queryParams.name" clearable placeholder="请输入仪器名称"
                  @keyup.enter="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-row justify="end">
                <el-button type="success" @click.enter="handleQuery">搜索</el-button>
                <el-button class="resetBtn" @click="resetQuery">重置</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </el-row>

      <div>
        <el-row style="justify-content: space-between">
          <el-row>
            <p class="pinformation">仪器档案列表</p>
            <p class="totalStyle">共 {{ total }} 条数据</p>
          </el-row>
        </el-row>
        <el-row style="justify-content: start;padding-bottom: 5px">
          <el-button type="success" link icon="Plus" @click="addInstrumentBtnClick">新增</el-button>
          <el-button link @click="handleDelete" :disabled="!ids.length" icon="Delete" type="warning">批量删除</el-button>
          <el-button type="success" link @click="handleBindTemplate" icon="Refresh">绑定使用记录</el-button>
          <el-button type="success" link @click="handleImport" icon="Upload">导入数据</el-button>
          <el-button type="success" link @click="handleExport" icon="Download">导出数据</el-button>
        </el-row>
        <el-table ref="mainTableRef" class="business" v-loading="loading" :data="instrumentTable"
          :row-class-name="tableRowClass" @row-click="rowClick" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="仪器名称" align="center" prop="name" />
          <el-table-column label="仪器编号" align="center" prop="number" />
          <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
              <dict-tag :options="sys_instrument_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="success" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
            <!-- v-hasPermi="['resource:instrument:remove']" -->
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>

    <el-card class="rightCard">
      <!-- 基础信息 -->
      <el-tabs v-model="rightActiveName">
        <el-tab-pane label="基本信息" name="first">
          <!-- 基础信息 -->
          <el-form label-width="120px" :model="form" :rules="rules" ref="instrumentRef">
            <div>
              <!-- 标题区域 -->
              <el-row style="margin-bottom: 5px">
                <el-col :span="22">
                  <p class="pinformation">基础信息</p>
                </el-col>
                <el-col :span="2">
                  <el-row justify="end">
                    <el-button type="success" size="small" @click="submitForm(false)">保存</el-button>
                  </el-row>
                </el-col>
              </el-row>
              <!-- /标题区域 -->

              <el-row>
                <el-col :span="16">
                  <el-form-item label="仪器名称：" prop="name">
                    <el-input maxlength="100" v-model="form.name" placeholder="请输入仪器名称" clearable />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="仪器型号：" prop="code">
                    <el-input maxlength="100" v-model="form.code" placeholder="请输入仪器型号" clearable />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="仪器编号：" prop="number">
                    <el-input maxlength="100" v-model.trim="form.number" placeholder="请输入仪器编号" clearable />
                  </el-form-item>
                </el-col>

                <el-col :span="4">
                  <el-form-item label="仪器来源：" prop="source">
                    <el-select clearable v-model="form.source" filterable>
                      <el-option v-for="item in sys_instrument_source" :key="item.value" :label="item.label"
                        :value="parseInt(item.value)" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="4">
                  <el-form-item label="仪器状态：" prop="status">
                    <el-select v-model="form.status" filterable>
                      <el-option v-for="item in sys_instrument_status" :key="item.value" :label="item.label"
                        :value="parseInt(item.value)" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="4">
                  <el-form-item label="负责人：" prop="userId">
                    <el-select v-model="form.userId" filterable clearable>
                      <el-option v-for="item in userList" :value="item.userId" :key="item.userId"
                        :label="item.nickName"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="4">
                  <el-form-item label="是否计量设备：" prop="isUnit">
                    <el-select v-model="form.isUnit" filterable>
                      <el-option v-for="item in isUnitSelect" :key="item.value" :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 第二行 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="应用场景：" prop="useTypeIds">
                    <el-checkbox-group v-model="form.useTypeIds">
                      <el-checkbox label="0" size="large">现场</el-checkbox>
                      <el-checkbox label="1" size="large">实验室</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="制造厂商：" prop="madeObject">
                    <el-input maxlength="100" v-model="form.madeObject" placeholder="请输入制造厂商" clearable />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="出厂编号：" prop="outNumber">
                    <el-input maxlength="100" v-model="form.outNumber" placeholder="请输入出厂编号" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- /第二行 -->

              <!-- 第三行 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="出厂日期：" prop="outDate">
                    <el-date-picker style="width: 100% !important" class="widthStyle" clearable v-model="form.outDate"
                      type="date" value-format="YYYY-MM-DD" placeholder="请选择出厂日期"></el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="购买日期：" prop="buyDate">
                    <el-date-picker style="width: 100% !important" class="widthStyle" clearable v-model="form.buyDate"
                      type="date" value-format="YYYY-MM-DD" placeholder="请选择购买日期"></el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="验收日期：" prop="acceptanceDate">
                    <el-date-picker style="width: 100% !important" clearable v-model="form.acceptanceDate" type="date"
                      value-format="YYYY-MM-DD" placeholder="请选择验收日期"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- /第三行 -->

              <!-- 第四行 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="启用日期：" prop="useDate">
                    <el-date-picker style="width: 100% !important" clearable v-model="form.useDate" type="date"
                      value-format="YYYY-MM-DD" placeholder="请选择启用日期"></el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="5">
                  <el-form-item label="资产编号：" prop="propertyNumber">
                    <el-input maxlength="100" v-model="form.propertyNumber" placeholder="请输入资产编号" clearable />
                  </el-form-item>
                </el-col>

                <el-col :span="4">
                  <el-form-item label="价格（元）：" prop="price">
                    <el-input-number maxlength="100" :min="0" controls-position="right" style="width: 100%"
                      v-model="form.price" placeholder="请输入价格" clearable />
                  </el-form-item>
                </el-col>

                <el-col :span="7">
                  <el-row justify="end">
                    <el-col :span="16">
                      <el-form-item label="维保周期：" prop="cycleNumber">
                        <el-input-number controls-position="right" :min="1" v-model="form.cycleNumber" placeholder="请输入"
                          clearable />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item prop="cycleUnit" label-width="20px">
                        <el-select clearable v-model="form.cycleUnit" filterable>
                          <el-option v-for="item in sys_instrument_cycle" :key="item.value" :label="item.label"
                            :value="parseInt(item.value)" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <!-- /第四行 -->

              <!-- 第五行 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="放置地点：" prop="place">
                    <el-input maxlength="100" v-model="form.place" placeholder="请输入放置地点" clearable />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="仪器用途：" prop="useContent">
                    <el-input maxlength="100" v-model="form.useContent" :min-height="192" placeholder="请输入仪器用途"
                      clearable />
                  </el-form-item>
                </el-col>

                <el-col :span="4">
                  <el-form-item label="仪器/设备：" prop="flagId">
                    <el-select clearable v-model="form.flagId" filterable>
                      <el-option v-for="item in flagIdSelect" :key="item.value" :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 第五行 -->

              <!-- 备注 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="使用记录模板：" prop="templateId">
                    <el-select clearable v-model="form.templateId" style="width:100%" filterable>
                      <el-option v-for="item in templateList" :label="item.tableName" :value="item.tableId"
                        :key="item.tableId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="备注：" prop="remark">
                    <el-input maxlength="100" v-model="form.remark" placeholder="请输入内容" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-row>
                  <p class="pinformation">适用检测项目和方法</p>
                  <p class="totalStyle">共 {{ targetList?.length || 0 }} 条数据</p>
                  <el-row style="padding-bottom: 5px; margin-left: 30px">
                    <el-button type="success" class="addBtnStyle" link icon="Plus" @click="handleAddJcxm">新增</el-button>
                  </el-row>
                </el-row>
                <el-table ref="sub1TableRef" height="7vw" class="business" v-loading="targetTableLoading"
                  :data="targetList">
                  <el-table-column label="检测项目" align="center" prop="bucketName">
                    <template #default="scope">
                      <span v-html="transformation(scope.row.bucketName)"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="准确度" align="center" prop="accuracy" />
                  <el-table-column label="量程" align="center" prop="lc" />
                  <el-table-column label="分辨率" align="center" prop="fbl" />
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                      <el-button link type="success" icon="Edit" @click="targetEditBtnClick(scope.row)">编辑</el-button>
                      <el-button link type="success" icon="Delete"
                        @click="targetDeleteBtnClick(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
              <!-- /备注 -->
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="其它信息" name="second" :disabled="!form.instrumentId">
          <!-- <business v-if="rightActiveName == 'second'" ref="businessRef" :zjId="form.contractId" :status="status"
            :isDisabled="isDisabled" /> -->
          <other v-if="rightActiveName == 'second'" :instrumentId="form.instrumentId" />
        </el-tab-pane>
        <!-- <el-tab-pane label="财务信息" name="thrtd" :disabled="true">
          <div v-if="rightActiveName == 'thrtd'"></div>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
    <!-- 用户导入对话框 -->
    <el-dialog :class="'el-dialog-theme3'" :title="upload.title" v-model="upload.open" width="400px"
      append-to-body draggable :close-on-click-modal="false">
      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-error="handleUploadError" :on-success="handleFileSuccess"
        :auto-upload="false" drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <div class="el-upload__tip">
              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
            </div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="success" :underline="false" style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="submitFileForm">确 定</el-button>
          <el-button type="danger" @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :class="'el-dialog-theme3'" ref="dialogRef" v-model="isShowJcxmDialog"
      title="新增检测项目和方法" width="40%" draggable destroy-on-close :close-on-click-modal="false" @close="resetJcxm">
      <el-form ref="jcxmFormRef" label-width="100px" :model="jcxmForm" :rules="jcxmRules">
        <el-form-item label="检测类别：" prop="jclbId">
          <el-select v-model="jcxmForm.jclbId" style="width: 100%" @change="jclbChange" filterable>
            <el-option v-for="item in jclbList" :key="item.jclbId" :label="item.jclbName" :value="item.jclbId" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测项目：" prop="jcxmId">
          <el-select v-model="jcxmForm.jcxmId" clearable filterable remote reserve-keyword remote-show-suffix
            :remote-method="remoteJcxm" :loading="jcxmLoading" @change="jcxmChange" style="width: 100%">
            <el-option v-for="item in jcxmList" :key="item.jcxmId" :value="item.jcxmId" :label="item.jcxmName">
              <span v-html="transformation(item.jcxmName)"></span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检测方法：" prop="methodId">
          <el-select v-model="jcxmForm.methodId" clearable :loading="methodLoading" style="width: 100%">
            <el-option v-for="item in methodList" :key="item.methodId" :value="item.methodId" :label="item.methodName">
              <span v-html="transformation(item.methodName)"></span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="success" @click="handleSaveJcxm">保存</el-button>
        <el-button type="danger">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Instrument">
import other from "./cnps/other";

import {
  listInstrument,
  getInstrument,
  delInstrument,
  addInstrument,
  bindUseTemplate
} from "@/api/resource/instrument";
import {
  listTemplate,
} from "@/api/templateEditor/table";
import { listUser } from "@/api/contract/check";
import { allListJclb } from "@/api/store/jclb";
import { listJcxm } from "@/api/store/jcxm";


import { getToken } from "@/utils/auth";

const { proxy } = getCurrentInstance();
const { sys_instrument_source, sys_instrument_cycle, sys_instrument_status } = proxy.useDict(
  "sys_instrument_source",
  "sys_instrument_cycle",
  "sys_instrument_status"
);

const { sys_instrument } = proxy.useShareDict("sys_instrument");

const loading = ref(true);
const jcxmLoading = ref(false);
const ids = ref([]);
const total = ref(0);
const instrumentTable = ref([]);
const targetTableLoading = ref(false);
const targetList = ref([]);
const instrumentList = ref([]);
const warrantyList = ref([]);
const templateList = ref([]);
const rightActiveName = ref("first");
const isShowJcxmDialog = ref(false)
const jclbList = ref([]);
const jcxmList = ref([]);
const methodLoading = ref(false);
const methodList = ref([]);
// 是否计量设备选项
const isUnitSelect = ref([
  {
    value: 0,
    label: "是",
  },
  {
    value: 1,
    label: "否",
  },
]);

// 仪器设备选项
const flagIdSelect = ref([
  {
    value: 0,
    label: "仪器",
  },
  {
    value: 1,
    label: "设备",
  },
]);
onMounted(() => {
  nextTick(() => {
    getList();
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  })
})
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [
        { tableName: "main", bottomHeight: 74 },
        { tableName: "sub3", bottomHeight: 10 },
      ];
    } else {
      heightParams.value = [
        { tableName: "main", bottomHeight: 21 },
        { tableName: "sub3", bottomHeight: 10 },
      ];
    }
    getTableHeight();
  }
);

const heightParams = ref([
  { tableName: "main", bottomHeight: 21 },
  { tableName: "sub3", bottomHeight: 10 },
]);

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

const data = reactive({
  form: { params: {}, cycleUnit: 1, source: 0, status: 0, isUnit: 0 },
  jcxmForm: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    typeId: -1,
  },
  rules: {
    name: [{ required: true, message: "仪器名称不能为空", trigger: "blur" }],
    number: [{ required: true, message: "仪器编号不能为空", trigger: "blur" }],
    createUserId: [
      { required: true, message: "创建人id不能为空", trigger: "blur" },
    ],
    createUserName: [
      { required: true, message: "创建人不能为空", trigger: "blur" },
    ],
    createTime: [
      { required: true, message: "创建时间不能为空", trigger: "blur" },
    ],
  },
  jcxmRules: {
  },
});

const { queryParams, form, rules, jcxmForm } = toRefs(data);

/** 查询仪器档案列表 */
function getList() {
  loading.value = true;
  listInstrument(queryParams.value).then((response) => {
    instrumentTable.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function handleTemplateList() {
  listTemplate({ modelType: 15 }).then((res) => {
    templateList.value = res.data;
  });
}
handleTemplateList();
// 表单重置
function reset() {
  proxy.resetForm("instrumentRef");
  form.value.cycleUnit = 1
  form.value.source = 0
  form.value.status = 0
  form.value.isUnit = 0
  delete form.value.instrumentId
  targetList.value = [];
  instrumentList.value = [];
  warrantyList.value = [];
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.instrumentId);
}

/** 修改按钮操作 */
async function rowClick(row) {
  rightActiveName.value = "first";
  reset();
  const _id = row.instrumentId || ids.value;
  await getInstrument(_id).then((response) => {
    form.value = response.data;
    form.value.price = parseInt(form.price)
    form.value.useTypeIds = form.value.useTypeId?.split("、");
    form.value.params = {};
    heightBright.value = row.instrumentId;
  });
}

/** 提交按钮 */
function submitForm(isAuto) {
  return new Promise((resolve) => {
    proxy.$refs["instrumentRef"].validate((valid) => {
      if (!valid) return false;
      if (form.value.useTypeIds?.length > 0) {
        form.value.useTypeId = form.value.useTypeIds.join("、");
      }
      addInstrument(form.value).then((res) => {
        if (form.value.instrumentId) {
          if (!isAuto) {
            proxy.$modal.msgSuccess("编辑成功");
          }
        } else {
          form.value.instrumentId = res.data;
          if (!isAuto) {
            proxy.$modal.msgSuccess("新增成功");
          }
          heightBright.value = res.data;
        }
        getList();
        resolve();
      });
    });
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.instrumentId || ids.value;
  proxy.$modal
    .confirm("删除仪器会将仪器相关的所有数据删除，确定删除吗？")
    .then(function () {
      targetTableLoading.value = true;
      return delInstrument(_ids);
    })
    .then(() => {
      reset();
      getList();
      proxy.$modal.msgSuccess("删除成功");
      targetTableLoading.value = false;
    })
    .catch(() => { });
}

// 仪器档案列表 => 新增
const addInstrumentBtnClick = () => {
  reset();
  heightBright.value = "";
  rightActiveName.value = "first";
};

const heightBright = ref("");
function tableRowClass({ row }) {
  if (row) {
    if (row.instrumentId == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}

const userList = ref([]);
listUser().then((res) => {
  userList.value = res.data;
});

// -------------------导入模板逻辑-------------------
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: false,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/resource/instrument/importData",
});

/** 导入按钮操作 */
function handleImport() {
  upload.title = "仪器档案导入";
  upload.open = true;
}

function handleBindTemplate() {
  loading.value = true;
  bindUseTemplate().then(res => {
    loading.value = false;
    proxy.$modal.msgSuccess("操作成功！");
  }).catch(e => {
    loading.value = false;
  })
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};

/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert(
    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
    response.msg +
    "</div>",
    "导入结果",
    { dangerouslyUseHTMLString: true }
  );
  getList();
};

// 上传失败
function handleUploadError(err) {
  upload.isUploading = false;
  proxy.$modal.msgError("导入数据失败，原因：" + err.message);
}

/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("/resource/instrument/export", {
    ...queryParams.value,
  }, `仪器档案表_${new Date().getTime()}.xlsx`);
};

/** 下载模板操作 */
function importTemplate() {
  proxy.download("/resource/instrument/importTemplate", {
  }, `仪器模板_${new Date().getTime()}.xlsx`);
};

function handleAddJcxm() {
  isShowJcxmDialog.value = true;
}
function jclbChange(jclbId) {

}

function jcxmChange(jcxmId) {
}

function remoteJcxm(val) {
  if (!jcxmForm.value.jclbId) {
    jcxmList.value = [];
    return;
  }
  if (val) {
    jcxmLoading.value = true;
    setTimeout(() => {
      listJcxm({ jcxmName: val }).then((res) => {
        jcxmLoading.value = false;
        jcxmList.value = res.rows;
      });
    }, 200);
  } else {
    jcxmList.value = [];
  }
}

function resetJcxm() {

}

allListJclb().then((res) => {
  jclbList.value = res.data;
});

function handleSaveJcxm() {
  proxy.$refs["jcxmFormRef"].validate(async (valid) => {
    if (!valid) return false;
    isShowJcxmDialog.value = false;
  });
}

function transformation(row) {
  const a = proxy.getSupAndSub(row);
  return a;
}
</script>

<style lang="scss" scoped>
.addBtnStyle {
  margin-left: -20px !important;
}

.el-col.el-col-8 {
  height: 47px !important;

  .el-checkbox-group {
    margin-top: -3px !important;
  }
}

.widthStyle {
  width: 350px !important;
}
</style>
